<template>
  <div class="right-header">
    <div class="left-bread">
      <i
        :class="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
        @click="CHANGE_COLLAPSE"
      ></i>
      <!-- <i class="el-icon-s-unfold" v-else></i> -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          v-for="(item, index) in breads"
          :key="index"
          :to="{ path: item.path }"
          >{{ item.title }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div :class="`bn-nav `">
      <div :class="`item  ${activeIndex==index?'activeItem':''} `" v-for="(item,index) in menuList" :key="item.id" @click="exchangeNav(index)">
        <span style="z-index:1">{{item.name}}</span>
      </div>
    </div>
    <div style="display: flex;align-items: center;">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <span>
            欢迎你，{{ userInfo.account }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>

          <el-avatar icon="el-icon-user-solid" :src="userInfo.imgUrl"></el-avatar>
        </span>
       
        <el-dropdown-menu slot="dropdown" >
          <el-dropdown-item command="handleLogOut">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span @click="handleLogOut" style="margin-left: 20px;cursor: pointer;">
          退出
        </span>
    </div>
  </div>
</template>

<script>
import { logout } from '@/api/account'
import Cookie from 'js-cookie'
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      activeIndex:0,

      // breads: [],
    };
  },
  props:['menuList'],

  computed: {
    ...mapState(["collapse",'userInfo']),
    breads(){
      let arr = [];
      this.$route.matched.forEach((item) => {
        if (item.meta.title) {
          arr.push({ title: item.meta.title, path: item.path });
        }
      });
      return  [{ title: "app", path: "/Home" }, ...arr];
    }
  },
  // watch:{
  //   '$route.path':function(){
  //     this.createBread()
  //   }
  // },
  created() {
    // this.createBread()
    // console.log(this.$route.matched);
    this.getUserInfo()
  },
  methods: {
    ...mapMutations(["CHANGE_COLLAPSE",'SET_USERINFO']),
    getUserInfo(){
    
    },
    // 处理每次点击下拉菜单的回调
    handleCommand(v){
      if(v==='personal'){
        this.$router.push('/Account/Personal')
      }else{
        localStorage.clear() // 清除token
        this.$router.push('/login')
      }
    },
    handleLogOut() {
      logout()
        .then((res) => {
          // localStorage.removeItem('checkedAreaKeyes')
          localStorage.clear()
          Cookie.remove('token')
          location.href = '/'
        })
        .catch((err) => {
          console.log(err, 'err')
          // localStorage.clear()
          // Cookie.remove('token')
          // location.href = '/'
        })
    },
    exchangeNav(index) {
      this.$emit('changeKey',index)
      this.activeIndex = index
      console.log(this.activeIndex);
      this.$forceUpdate()
      
      // if (param.path === '/monitor') {
      //   this.$router.push(param.path)
      // } else if (param.children[0].children[0].path) {
      //   this.$router.push(param.children[0].children[0].path)
      // }
    }
  },

};
</script>

<style lang="less" scoped>
.right-header {
  height: 60px;
  background: #efefef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  .left-bread {
    display: flex;
    align-items: center;
    i {
      margin-right: 20px;
      font-size: 26px;
    }
  }
  .el-dropdown-link {
    display: flex;
    align-items: center;
    i {
      margin-right: 10px;
    }
  }
}
.bn-nav {
    display: flex;
    align-items: center;

    .item {
      font-size: 18px;
      font-family: Microsoft YaHei;
      color: #000000;
      background: linear-gradient(0deg, rgba(146, 150, 155, 0.6) 0%, rgba(255, 255, 255, 0.6) 39.990234375%);
      -webkit-background-clip: text;
      // -webkit-text-fill-color: transparent;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      position: relative;
      cursor: pointer;
      width: 88px;
      height: 56px;
      margin-left: 16px;
      
      border-radius: 8px;
      span{
        margin-top: 4px;
        font-size: 14px;
        line-height: 22px;
      }
    }
    /* 鼠标悬浮 */
    .item:hover::after {
      content: ' ';
      position: absolute;
      left: -3px;
      top: 0px;
      width: 88px;
      height: 56px;
      background: #2F7DF1;
      border-radius: 5px;
    }
    /* 鼠标按下 */
   .item:active::after {
      content: ' ';
      position: absolute;
      left: -3px;
      top: 0px;
      width: 88px;
      height: 56px;
      background: #2F7DF1;
      border-radius: 5px;
    }

  }
  .activeItem {
      font-weight: bold !important;
      border-bottom: 3px solid;
      border-bottom-color: #2F7DF1 !important;

     
    }
</style>